<template>
    <el-dialog :model-value="true" :close-on-click-modal="true" :before-close="handleClose" 
        title="关联表单" append-to-body width="420px">
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="130px">
            <el-form-item :label="`关联${relateForm.clientType == 'pc' ? '移动端' : 'PC端'}表单`" prop="relatedFormId">
                <el-select v-model="formData.relatedFormId" placeholder="请选择关联表单" class="width-parent">
                    <el-option
                        v-for="item in formList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.formName"
                    />
                </el-select>
            </el-form-item>
        </el-form>
        
        <template #footer>
            <span class="dialog-footer">
                <el-button :loading="loading" type="primary" @click="handleSubmit">确定</el-button>
                 <el-button  @click="handleClose">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
/*
    * File Created: 2022-02-14 15:05:42
    * Author: yubaolin (yubaolin6@outlook.com)
    * Desc: 关联表单 外层用v-if控制是否显示
    * Last Modified: 2022-02-14 15:08:33
    * Modified By: yubaolin (yubaolin6@outlook.com>)
    */
import { ref, reactive, onMounted, toRefs} from "vue";
import api from '@/api/index'
import { ElMessage } from 'element-plus'

export default {
    props: {
        relateForm: {
            type: Object,
            required: true,
            default: () => {}
        }
    },
    emits: ['refresh', 'close'],
    setup(props, {emit}) {
        console.log(props.relateForm)
        const formRef = ref(null)
        const state = reactive({
            loading: false,
            formData: {
                formId: props.relateForm.id,
                relatedFormId: '',
            },
            rules: {
                relatedFormId: [
                    {required: true, message: '请选择表单'}
                ]
            },
            // 关联表单列表
            formList: [],
        })
        
        
        const methods = {
            // 查询关联表单
            requestFormList() {
                const {bizTypeCode, subBizTypeCode, clientType} = props.relateForm
                api.writeForm.unrelatedFormList({
                    bizTypeCode,
                    subBizTypeCode,
                    clientType: clientType == 'pc' ? 'app' : 'pc',
                }).then(data => {
                    state.formList = data
                })
            },
        }

        const handles = {
            handleClose() {
                emit('close')
            },
            handleSubmit() {
                formRef.value.validate(valid => {
                    if (!valid) {
                        return
                    }
                    state.loading = true
                    api.writeForm.relateWriteForm(state.formData).then(() => {
                        ElMessage.success('操作成功')
                        state.loading = false
                        emit('refresh')
                        handles.handleClose()
                    }).catch(() => {
                        state.loading = false
                    })
                })
            }
        }


        onMounted(() => {
            methods.requestFormList()
        })

        return {
            formRef,
            ...toRefs(state),
            ...handles,
        }
    }
}
</script>
<style lang="scss">
.width-parent{
    width: 100%;
}
</style>
